<template>
  <div class="home-page">
    <header>
      <h1>欢迎来到主页</h1>
      <button @click="handleLogout">退出登录</button>
    </header>
    <main>
      <p>这是主页内容，您可以根据需要定制。</p>
    </main>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  methods: {
    handleLogout() {
      localStorage.removeItem('token'); // 清除登录信息
      this.$router.push('/login'); // 返回登录页
    },
  },
};
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(to right, #2575fc, #6a11cb);
  color: white;
}

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
}

button {
  background: white;
  color: #2575fc;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #6a11cb;
  color: white;
}
</style>
